<!DOCTYPE html>
<html lang="zh-Cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- 头部开始 -->
    <div class="header" id="top">
        <div class="container">
            <ul class="header-left">
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">IoT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天星数科</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li><a href="#">智能生活</a></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="header-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
            </ul>
        </div>    
    </div>
    <!-- 头部结束 -->
    <!-- 导航开始 -->
    <div class="nav">
        <div class="container">
            <div class="nav-logo">
                <a href="#"></a>
            </div>
            <ul class="nav-main">
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
            <div class="nav-search">
                <input type="text" class="search-text" placeholder="家电">
                <input type="button" class="search-btn">
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- banner开始 -->
    <div class="banner container">
        <div class="banner-left"></div>
        <div class="banner-right">
            <img src="image/banner.jpg">
        </div>
    </div>
    <!-- banner结束 -->
    <!-- 商品盒子开始(两行) -->
    <div class="box container">
        <div class="box-hd">
            <h2 class="title"><a name="phone">手机</a></h2>
            <div class="more">
                <a href="#">查看全部</a>
            </div>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
    </div>
    <!-- 商品盒子结束(两行) -->
    <!-- 中部广告条开始 -->
    <div class="banner-box">
        <img src="image/banner1.jpg">
    </div>
    <!-- 中部广告条结束 -->
    <!-- 商品盒子开始(一行) -->
    <div class="box container">
        <div class="box-hd">
            <h2 class="title"><a name="jiadian">家电</a></h2>
            <div class="more">
                <a href="#">查看全部</a>
            </div>
        </div>
        <div class="box-bd clearfix">
            <ul>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
        </div>
    </div>
    <!-- 商品盒子结束(一行) -->
    <!-- 中部广告条开始 -->
    <div class="banner-box">
        <img src="image/banner2.jpg">
    </div>
    <!-- 中部广告条结束 -->
    <!-- 底部开始 -->
    <div class="container footer clearfix">
        <div class="footer-left">
            <dl class="link">
                <dt>帮助中心</dt>
                <dd><a href="#">账户管理</a></dd>
                <dd><a href="#">购物指南</a></dd>
                <dd><a href="#">订单操作</a></dd>
            </dl>
            <dl class="link">
                <dt>服务支持</dt>
                <dd><a href="#">售后政策</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">相关下载</a></dd>
            </dl>
            <dl class="link">
                <dt>线下门店</dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权体验店</a></dd>
            </dl>
            <dl class="link">
                <dt>关于小米</dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">投资者关系</a></dd>
                <dd><a href="#">企业社会责任</a></dd>
                <dd><a href="#">廉洁举报</a></dd>
            </dl>
            <dl class="link">
                <dt>关注我们</dt>
                <dd><a href="#">新浪微博</a></dd>
                <dd><a href="#">官方微信</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">公益基金会</a></dd>
            </dl class="link">
            <dl class="link">
                <dt>特色服务</dt>
                <dd><a href="#">F 码通道</a></dd>
                <dd><a href="#">礼物码</a></dd>
                <dd><a href="#">防伪查询</a></dd>
            </dl>
        </div>
        <div class="footer-right">
            <p class="phone">400-100-5678</p>
            <p class="time">8:00-18:00（仅收市话费）</p>
            <a href="#" class="footer-btn">人工客服</a>
            <div class="bottom">
                关注小米：
                <a href="#" class="wb"></a>
                <a href="#" class="wx"></a>
            </div>
        </div>
    </div>
    <!-- 底部结束 -->
    <div class="tool">
        <a href="#phone">1F 手机</a>
        <a href="#jiadian">2F 家电</a>
        <a href="#top">回到顶部</a>
    </div>
</body>
</html>








